Day13 — 開發一個簡單的 JavaScript 應用(傻故事產生器) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 9

佛心分享-IT 人自學之術

JavaScript自學分享系列第 13 篇

Day13 — 開發一個簡單的 JavaScript 應用(傻故事產生器)

16th鐵人賽

姐姐恩

2024-09-24 23:47:31

51 瀏覽

分享至

大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。

Day13 ——開發一個簡單的 JavaScript 應用（傻故事產生器）

成果展示:

程式碼如下:

HTML

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <title>Silly story generator</title>

    <style>
      body {
        font-family: helvetica, sans-serif;
        width: 350px;
      }

      label {
        font-weight: bold;
      }

      div {
        padding-bottom: 20px;
      }

      input[type="text"] {
        padding: 5px;
        width: 150px;
      }

      p {
        background: #ffc125;
        color: #5e2612;
        padding: 10px;
        visibility: hidden;
      }
    </style>
  </head>


  <body>
    
    <div>
      <label for="customname">Enter custom name:</label>
      <input id="customname" type="text" placeholder="" />
    </div>
    <div>
      <label for="us">US</label
      ><input id="us" type="radio" name="ukus" value="us" checked />
      <label for="uk">UK</label
      ><input id="uk" type="radio" name="ukus" value="uk" />
    </div>
    <div>
      <button class="randomize">Generate random story</button>
    </div>
    
    <p class="story"></p>
    <script src="main.js"></script>
  </body>
</html>

JavaScript

const customName = document.getElementById('customname');
const randomize = document.querySelector('.randomize');
const story = document.querySelector('.story');

function randomValueFromArray(array){
  const random = Math.floor(Math.random() * array.length);
  return array[random];
}

let storyText= "It was 94 fahrenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but was not surprised — :insertx: weighs 300 pounds, and it was a hot day.";
let insertX =["Willy the Goblin","Big Daddy","Father Christmas"];
let insertY =["the soup kitchen","Disneyland","the White House"];
let insertZ =["spontaneously combusted","melted into a puddle on the sidewalk","turned into a slug and crawled away"];

randomize.addEventListener('click', result);

function result() {
    console.log("Button checked");
    let newStory= storyText; 

    let xItem = randomValueFromArray(insertX);
    let yItem = randomValueFromArray(insertY);
    let zItem = randomValueFromArray(insertZ);

    newStory = newStory.replace(/:insertx:/g, xItem);
    newStory = newStory.replace(/:inserty:/g, yItem);
    newStory = newStory.replace(/:insertz:/g, zItem);

  if(customName.value !== '') {
    const name = customName.value;
    newStory = newStory.replace("Bob", name);
  }

  if(document.getElementById("uk").checked) {
    const weight = Math.round(300 * 0.0714285714)+"stone";
    const temperature =  Math.round((94 - 32) * 5/9)+"centigrade";
    newStory = newStory.replace("94 fahrenheit", temperature);
    newStory = newStory.replace("300 pounds", weight);
  }

  story.textContent = newStory;
  story.style.visibility = 'visible';
}

心得:
　　我是按照文章最後提供的指引製作的，沒想到過程中還是有遇到問題，文章中提及須將JS程式碼引用至HTML程式碼中，但一開始我誤解它的意思，錯誤地將標籤放在標籤外，但修正此部分後，按Button仍無法生成文字，最後有使用chatGPT偵錯，最後可能是因為JS程式碼在HTML元素載入之前執行了，須將JS程式碼的引用放在HTML檔案的底部、標籤之前，使HTML元素在JS程式碼執行前載入，此部分修正後就可以正常執行了。

學習資源:
傻故事產生器